<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Dashboard by Bootstrapious.com</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Google fonts - Roboto -->
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<!-- Choices CSS-->
<link rel="stylesheet"
	href="vendor/choices.js/public/assets/styles/choices.min.css">
<!-- Custom Scrollbar-->
<link rel="stylesheet"
	href="vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="css/style.default.css"
	id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="css/custom.css">
<!-- Favicon-->
<link rel="shortcut icon" href="img/favicon.ico">
<style>
.login-form input+div {
	position: absolute;
}
</style>
<!-- Tweaks for older IEs-->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
	<div class="login-page d-flex align-items-center bg-gray-100">
		<div class="container mb-3">
			<div class="row">
			
				<div class="col-md-6 mx-auto">
				
					<div class="card position-relative" >
						<div class="card-body p-5">
							<header class="text-center mb-5">
								<h1 class="text-xxl text-gray-400 text-uppercase">
									后台管理系统<strong class="text-primary">BookStore</strong>
								</h1>
								<p class="text-gray-500 fw-light"></p>
							</header>
							<form class="login-form" id="loginForm">
								<div class="row">
									<div class="col-lg-7 mx-auto">
										<div class="mb-4">
											<input class="form-control" id="login-username"
												placeholder="Email" type="text" name="loginUsername"
												autocomplete="off" required value="admin@book.com"
												data-validate-field="loginUsername">

										</div>
										<div class="mb-4">
											<input class="form-control" id="login-password"
												type="password" placeholder="password"   name="loginPassword"
												required data-validate-field="loginPassword">

										</div>
									</div>
									<div class="col-12 text-center">
										<button class="btn btn-primary mb-3" id="loginBtn"
											type="submit">Login</button>
										<br>
										<a class="text-xs text-paleBlue" href="#!">Forgot
											Password? </a><br>
										<span class="text-xs mb-0 text-gray-500">Do not have an
											account? </span><a class="text-xs text-paleBlue ms-1"
											href="register.html"> Signup</a>
										<!-- This should be submit button but I replaced it with <a> for demo purposes-->
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div
			class="text-center position-absolute bottom-0 start-0 w-100 z-index-20">
			<p class="text-gray-500">
				Design by <a class="external"
					href="https://bootstrapious.com/p/admin-template">Bootstrapious</a>
				<!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)                      -->
			</p>
		</div>
	</div>
<!-- 提示消息 -->
    <div class="position-absolute top-50 start-50 translate-middle"  style="z-index:100000;margin-top:-120px" >
        <div id="liveToast" class="toast bg-danger bg-opacity-25" data-bs-delay="1000" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
                 
           </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
    </div>
    <!-- 提示消息end -->
	
	<!-- JavaScript files-->
	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="vendor/chart.js/Chart.min.js"></script>
	<!-- <script src="vendor/just-validate/js/just-validate.min.js"></script> -->
<script src="vendor/just-validate/js/just-validate.production.min.js"></script>
<script src="vendor/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
<!-- Main File-->
<script src="js/front.js"></script>
<script src="../js/ajax.js"></script>
<script>
 const validation = new JustValidate('#loginForm',{
            errorFieldCssClass: 'is-invalid',
            errorLabelStyle: {
              fontSize: '14px',
              color: '#dc3545',
            },
            successFieldCssClass: 'is-valid',
            successLabelStyle: {
              fontSize: '14px',
              color: '#20b418',
            },
            focusInvalidField: true,
            lockForm: true,
  });
  validation.addField("#login-username",[
    {
      rule: "required",
      errorMessage: '不能为空'
    },
    {
      rule:'email',
      errorMessage:'Email 格式错误'
    }
  ],{
    successMessage:'Good!'
  }).addField("#login-password",[{
    rule: "required",
      errorMessage: '不能为空'
  }],{
    successMessage:'Good!'
  });  
  validation.onSuccess((event)=>{
    let email=  document.querySelector("#login-username").value;
    let password= document.querySelector("#login-password").value;
    let formData = new FormData();
    formData.append("email",email);
    formData.append("password",password);
    //发送Ajax请求
    ajax.post('login',formData,function(data){ 
            let result=JSON.parse(data);
            if(result.flag){
              //登录信息存储到sessionStorage中
                sessionStorage.setItem("user",JSON.stringify(result.data));  
                location.href="admin/index.html";
            }else{
               //弹出消息提示框
               let toastLiveExample = document.getElementById('liveToast');
               let toastBody= document.querySelector("#liveToast .toast-body");
               toastBody.innerHTML=result.data;
               let toast = new bootstrap.Toast(toastLiveExample);
               toast.show()
            }
    });
    
  });
       
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
       //injectSvgSprite('https://bootstraptemple.com/files/icons/orion-svg-sprite.svg'); 
      
      
    </script>
	<!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
	<link rel="stylesheet"
		href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</body>
</html>